<template>
  <view class="page">
    <view class="bg-white">
      <u-tabs activeStyle="color:#0060E6;font-size:32rpx;font-weight:bold;"
        inactiveStyle="color:#999;font-size:32rpx;font-weight:bold;" itemStyle="height:80rpx;" :scrollable="false"
        :list="tabs" :current="current" @change="change"></u-tabs>
    </view>
    <!-- 操作按钮 -->
    <view class="flex align-center gap margin-top padding-lr" v-if="current === 0">
      <!-- 新增教师 -->
      <view class="btn-add">
        <u-text iconStyle="margin-top:6rpx;margin-right: 10rpx;font-size: 32rpx;font-weight:bold;color: #0060E6;"
          align="center" prefixIcon="plus" bold text="新增教师" size="36rpx" color="#0060E6" @click="toAddTeacher"></u-text>
      </view>
      <!-- 工作量查看 -->
      <view class="btn-check">
        <u-text align="center" bold text="工作量查看" size="36rpx" color="#FFA40C" @click="toTeacherList"></u-text>
      </view>
    </view>
    <!-- 新增学生按钮 -->
    <view class="flex align-center gap margin-top padding-lr" v-if="current === 1">
      <view class="btn-add">
        <u-text iconStyle="margin-top:6rpx;margin-right: 10rpx;font-size: 32rpx;font-weight:bold;color: #0060E6;"
          align="center" prefixIcon="plus" bold text="新增学生" size="36rpx" color="#0060E6"
          @click="showAddStudent = true"></u-text>
      </view>
      <view class="btn-check">
        <u-text iconStyle="margin-top:10rpx;margin-right: 10rpx;font-size: 36rpx;font-weight:bold;color: #FFA40C;"
          align="center" prefixIcon="checkmark" bold text="学员审核" size="36rpx" color="#FFA40C"
          @click="toReviewStudent"></u-text>
      </view>
    </view>
    <!-- 新增班级-->
    <view class="flex align-center gap margin-top padding-lr" v-if="current === 2">
      <view class="btn-add">
        <u-text iconStyle="margin-top:6rpx;margin-right: 10rpx;font-size: 32rpx;font-weight:bold;color: #0060E6;"
          align="center" prefixIcon="plus" bold text="新增班级" size="36rpx" color="#0060E6" @click="toAddClass"></u-text>
      </view>
      <view class="btn-check">
        <u-text iconStyle="margin-top:10rpx;margin-right: 10rpx;font-size: 36rpx;font-weight:bold;color: #FFA40C;"
          align="center" prefixIcon="checkmark" bold text="一键分班" size="36rpx" color="#FFA40C"
          @click="toBatchClass"></u-text>
      </view>
    </view>
    <!-- 主内容区域 -->
    <view class="main">
      <!-- 教师管理 -->
      <Card v-if="current === 0">
        <template v-for="item in 10" :key="item">
          <view class="flex gap-sm" @click="toTeacherDetail(item)">
            <u-avatar size="60rpx"></u-avatar>
            <u-text text="张三" size="28rpx" color="#333"></u-text>
          </view>
          <u-divider></u-divider>
        </template>
      </Card>

      <template v-if="current === 1">
        <!-- 搜索框 -->
        <view>
        </view>
        <!-- 学生列表 -->
        <CollapseBox class="margin-top padding" title="托管班：一年级（A）班" value="5人">
          <template v-for="item in 2" :key="item">
            <view class="flex align-center gap padding-lr margin-top" @click="toStudentDetail(item)">
              <u-avatar size="40rpx"></u-avatar>
              <u-text text="李四" size="28rpx"></u-text>
            </view>
          </template>
        </CollapseBox>
      </template>

      <template v-if="current === 2">
        <view class="class-item" v-for="item in classList" :key="item.id" @click="handleClassClick(item)">
          <view class="flex align-center justify-between">
            <view class="flex-1">
              <view class="flex align-center justify-between">
                <text class="class-tag" :class="{ 'type-1': item.type === 1, 'type-2': item.type === 2 }">
                  {{ item.type === 1 ? '托' : '末' }}
                </text>
                <view class="flex-1">
                  <u-text :text="item.className" size="32rpx" color="#333"></u-text>
                </view>
                <view>
                  <u-text :text="item.studentCount + '人'" size="32rpx" color="#666"></u-text>
                </view>
              </view>
              <view class="flex align-center margin-top-sm">
                <u-text :text="'班主任：' + item.teacher" size="28rpx" color="#666"></u-text>
                <u-text :text="'讲师：' + (item.subject || '-')" size="28rpx" color="#666"></u-text>
              </view>
            </view>
            <view class="margin-left-sm">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
        </view>
      </template>
      <template v-if="current === 3">
        <view class="btn-add-class" click-class="btn-add-class-hover" @click="toClassroomManagement"
          :style="{ color: themePrimary, backgroundColor: themeTertiary }">教室管理</view>
      </template>
      <!-- 校区列表 -->
      <PopupBox bgColor="#EFF4FF" :show="open" :top="140" @close="open = false">
        <view class="student-item" v-for="item in studentList" :key="item.value"
          @click.stop.prevent="changeStudent(item)">
          <u-text :text="item.name" color="#333" size="32rpx"></u-text>
          <u-icon size="32rpx" name="checkmark" v-if="studentValue.value === item.value"></u-icon>
        </view>
      </PopupBox>

      <!-- 新增学生弹窗 -->
      <up-popup :closeable="true" :show="showAddStudent" @close="showAddStudent = false">
        <view class="padding-xl">
          <u-button style="margin-top:40rpx" shape="circle" size="large" :color="themePrimary" text="首次创建学员"
            @click="toAddNewStudent"></u-button>
          <u-button :style="{ marginTop: '20rpx', color: themePrimary }" shape="circle" size="large"
            :color="themeTertiary" text="添加已有学员" @click="toAddExistingStudent"></u-button>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PopupBox from '@/components/PopupBox/index.vue';
import Card from '@/components/Card/index.vue';
import CollapseBox from '@/components/CollapseBox/index.vue';
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();
const open = ref(false); //打开学生下拉框
const tabs = ref([
  { name: '教师管理', value: '1' },
  { name: '学生管理', value: '2' },
  { name: '班级管理', value: '3' },
  { name: '其他', value: '4' },
]);
const current = ref(0);
const studentValue = ref({ name: '北大校区', value: '1' }); //学生下拉框选中的值

const showAddStudent = ref(false);
const studentList = ref([
  { name: '北大校区', value: '1' },
  { name: '西城校区', value: '2' }
]);

// 模拟数据
const classList = ref([
  {
    id: 1,
    type: 1,//托班
    className: '托管班：一年级（A）班',
    studentCount: 13,
    teacher: '张三',
    subject: '王五',
    schedule: '周三 18:00-20:00'
  },
  {
    id: 2,
    type: 2,//周末班
    className: '周末班：一年级-数学（A）班',
    studentCount: 13,
    teacher: '张三',
    subject: '李四',
    schedule: '周三 18:00-20:00'
  }
]);

// 点击课程项
const handleClassClick = (item) => {
  uni.navigateTo({
    url: `/pages/teacher/classes/detail?id=${item.id}&classType=${item.type}`
  });
};
const changeStudent = (value) => {
  studentValue.value = value;
  open.value = false;
};

const change = (item) => {
  console.log(item)
  current.value = item.index;
};

const toTeacherDetail = (item) => {
  uni.navigateTo({
    url: '/pages/principal/education/teacherDetail?id=' + item.id
  });
};

const toTeacherList = () => {
  uni.navigateTo({
    url: '/pages/principal/education/teacherList'
  });
};

const toAddTeacher = () => {
  uni.navigateTo({
    url: '/pages/principal/education/addTeacher'
  });
};

const toClassroomManagement = () => {
  uni.navigateTo({
    url: '/pages/principal/education/classroomManage/index'
  });
};

const toAddNewStudent = () => {
  uni.navigateTo({
    url: '/pages/common/addStudent/addNewStudent'
  });
};

const toAddExistingStudent = () => {
  uni.navigateTo({
    url: '/pages/common/addStudent/addStudent'
  });
};

const toReviewStudent = () => {
  uni.navigateTo({
    url: '/pages/common/reviewStudent/reviewStudent'
  });
};

// 一键分班
const toBatchClass = () => {
  uni.navigateTo({
    url: '/pages/principal/education/classroomManage/divideIntoClass'
  });
};

// 新增班级
const toAddClass = () => {
  uni.navigateTo({
    url: '/pages/principal/education/classroomManage/addClass'
  });
};

// 学生详情
const toStudentDetail = (item) => {
  uni.navigateTo({
    url: '/pages/common/student/detail?id=' + item
  });
};
onShow(() => {
  for (let i = 0; i < 9; i++) {
    uni.setTabBarItem({
      index: i,
      visible: i > 5 ? true : false,
    });
  }
  uni.setTabBarStyle({
    selectedColor: '#0060E6',
    color: '#999999',
  });
});
</script>

<style lang="scss" scoped>
.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
}

.btn-add,
.btn-check {
  flex: 1;
  border-radius: 32rpx;
  padding: 40rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.btn-add {
  background: #EBF3FF;
}

.btn-check {
  background: #FFF1D9;
}

.btn-add-class {
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  border-radius: 32rpx;
  margin-top: 20rpx;
}

.btn-add-class-hover {
  background: #D8E3F7;
}

.class-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.class-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.class-tag {
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;

  &.type-1 {
    color: #0060E6;
    border: solid 1px #0060E6;
  }

  &.type-2 {
    color: #FFA40C;
    border: solid 1px #FFA40C;
  }
}

.class-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.student-count {
  font-size: 28rpx;
  color: #333;
  margin-right: 8rpx;
}

.class-time {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.time-label {
  color: #999;
}

.time-value {
  flex: 1;
  color: #666;
}

.detail-btn {
  color: #3c9cff;
  font-size: 26rpx;
}
</style>
